<template>
  <div class="app-detail-container">
    <AppHeader 
      v-if="appData"
      :appData="appData"
    />
    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { ref, watch, onMounted,computed } from 'vue'
import { useRoute } from 'vue-router'
import AppHeader from '@/components/AppHeader.vue'
import { describeApp } from "@/api/modules/auth";

const route = useRoute()
const appData = ref(null)
const loading = ref(false)

// 获取应用ID
const appId = computed(() => route.params.id)

// 获取应用详情数据
const fetchAppData = async () => {
  try {
    loading.value = true
    const res = await describeApp(appId.value)
    appData.value = res.data
  } catch (error) {
    console.error('获取应用详情失败:', error)
    ElMessage.error('获取应用详情失败')
  } finally {
    loading.value = false
  }
}

// 监听路由变化重新获取数据
watch(appId, (newVal) => {
  if (newVal) {
    fetchAppData()
  }
})

// 初始化获取数据
onMounted(() => {
  if (appId.value) {
    fetchAppData()
  }
})
</script>

<style scoped>
.app-detail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.main-content {
  flex: 1;
  overflow: auto;
  background-color: white;
  padding: 16px;
}
</style>